<template>
  <div class="patient-list-container">
    <div class="search">
      <input class="input" v-model="searchInfo" @keyup.enter="searchHandle" placeholder="请输入患者姓名"/>
    </div>
    <div class="patient-list" v-for="(item,index) in dataList.list" :key="index">
      <div class="patient-item">
        <div class="left">
          <h1>{{ item.patientName }}</h1>
        </div>
        <div class="right">
          <div class="icon-list">
            <div class="icon-item" @click="router.push('/plan/createPlan/'+item.patientId)">
              <img src="">
              <div class="title">智能生成</div>
            </div>
            <div class="icon-item" @click="router.push('/plan/nutritionPlan/index/'+item.patientId)">
              <img src="">
              <div class="title">自主制定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import patientAxios from "@/api/patient.js"
import {onMounted, reactive, ref} from "vue";
import {useRouter} from 'vue-router'
import {useDataStore} from "@/stores/dataStore"

const dataStore = useDataStore()

const router = useRouter()
//传递过来的数据
// const props = defineProps(['list'])
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(100)
//搜索初始化状态
const searchInfo = ref("")
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  patientAxios.patient_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
onMounted(() => {
  http()
})
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http()
}
</script>
<style scoped lang="scss">
.patient-list-container {
  background-color: #ffffff;
  height: 700px;
  padding-bottom: 100px;
}

.search {
  display: flex;
  height: 32px;
  padding: 8px;

  .input {
    opacity: .6;
    width: 100%;
    border: none;
    border-radius: 15px;
    background-color: #f1f1f1;
    padding: 16px;
  }
}

.patient-list {
  padding: 10px;

  .patient-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    width: 100%;

    .left {
      width: 50%;

      h1 {
        margin-left: 1px;
        font-weight: bolder;
        line-height: 60px;
        font-size: 20px;
      }
    }

    .right {
      .icon-list {
        display: flex;
        .icon-item {
          margin-left: 30px;
          img {
            width: 40px;
            height: 40px;
          }

          .title {
            font-size: 12px;
            opacity: .6;
          }
        }
      }
    }
  }
}

.page {
  position: fixed;
  bottom: 60px;
}
</style>
